<template>
    <div class="pay">
      <van-nav-bar fixed title="订单结算" left-arrow @click-left="router.go(-1)"/>

      <!-- 地址相关 -->
      <div class="address">
        <div class="left-icon">
          <van-icon name="logistics" />
        </div>
        <div class="info" v-if="true">
          <div class="info-content">
            <div class="name">yyf</div>
            <div class="mobile">15751776629</div>
          </div>
          <div class="info-address">
            浙江省 金华市 义乌市 180号
          </div>
        </div>

        <div class="info" v-else>
          请选择配送地址
        </div>

        <div class="right-icon">
          <van-icon name="arrow" />
        </div>
      </div>

      <!-- 订单明细 -->
      <div class="pay-list">
        <div class="list">
          <div class="goods-item">
            <div class="left">
              <img src="@/assets/images/goods1.jpg" width="100px" alt="">
            </div>
            <div class="right">
              <p class="tit text-ellipsis-2">
                三星手机 SAMSUNG Galaxy S23 8GB+256GB 超视觉夜拍系统 超清夜景 悠雾紫 5G手机 游戏拍照旗舰机s23
              </p>
              <p class="info">
                <span class="count">*3</span>
                <span class="price">￥99</span>
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="flow-num-box">
        <span>共12件商品, 合计: </span>
        <span class="money">￥999199</span>
      </div>

      <!-- 支付详细 -->
      <div class="pay-detail">
        <div class="pay-cell">
          <span>订单总金额: </span>
          <span class="red">￥999199</span>
        </div>

        <div class="pay-cell">
          <span>优惠卷</span>
          <span>无优惠卷可用</span>
        </div>

        <div class="pay-cell">
          <span>配送方式</span>
          <!-- 请先选择配送方式 -->
          <div v-if="true">请选择配送地址</div>
          <span v-else class="red">$100</span>
        </div>
      </div>

      <!-- 支付方式 -->
      <div class="pay-way">
        <div class="tit">支付方式</div>
        <div class="pay-cell">
          <span><van-icon name="balance-o" />余额支付</span>
          <!-- 请先选择配送方式 -->
          <div class="red"><van-icon name="passed" /></div>
        </div>
      </div>

      <!-- 买家留言 -->
      <div class="buytips">
        <textarea name="" id="" placeholder="选填: 买家留言 (50字以内)"></textarea>
      </div>

      <!-- 底部提交 -->
      <div class="footer-fixed">
        <div class="left">实付款: <span>￥999199</span></div>
        <div class="tipsbtn">提交订单</div>
      </div>
    </div>
</template>
  
  <script setup lang="ts">
import router from '@/router';
import { getAddressListApi } from '@/api/address'
import { onMounted } from 'vue';

  // 获取地址列表
  const getAddressList = async () => {
    const res = await getAddressListApi()
    console.log(res)
  }
  onMounted(() => {
    getAddressList()
  })

  </script>
  
  <style scoped lang="scss">
  .pay {
    padding-top: 46px;
    :deep(.van-nav-bar__arrow) {
      color: #000;
    }
    .address {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      font-size: 14px;
      color: #666;
      background: url('@/assets/images/Unnamed.png') no-repeat bottom;
      background: 60px auto;
      position: relative;
      .left-icon {
        margin-right: 20px;
      }
      .right-icon {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-7px);
      }
    }
    .pay-list {
      .goods-item {
        height: 100px;
        margin-bottom: 6px;
        padding: 10px;
        background-color: #fff;
        display: flex;
        .left {
          width: 100px;
          img {
            display: block;
            width: 80px;
            margin: 10px auto;
          }
        }
        .right {
          flex: 1;
          font-size: 14px;
          color: #333;
          line-height: 1.3;
          padding: 10px;
          padding-right: 0px;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          .info {
            margin-top: 5px;
            display: flex;
            justify-content: space-between;
            .price {
              color: #fa2209;
            }
          }
        }
      }
    }

    .flow-num-box{
      padding: 10px 10px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 14px;
      color: #333;
      border-bottom: 1px solid #efefef;
      .money {
        color: #fa2209;
      }
    }

    .pay-cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      font-size: 14px;
      color: #333;
      .red {
        color: #fa2209;
      }
      
    }

    .pay-detail {
      border-bottom: 1px solid #efefef;
    }

    .pay-way {
        border-bottom: 1px solid #efefef;
        padding: 10px 12px;
        font-size: 14px;
        color: #333;
        .tit {
          line-height: 30px;
        }
        .red {
          padding: 10px 0;
        }
    }

    .buytips {
      textarea {
        // display: block;
        width: 100%;
        height: 100px;
        padding: 12px;
        border: none;
        font-size: 14px;
      }
    }

    .footer-fixed {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 46px;
      line-height: 46px;
      border-top: 1px solid #efefef;
      background-color: #fff;
      font-size: 14px;
      display: flex;
      .left {
        padding-left: 12px;
        color: #666;
        flex: 1;
        span {
          color: #fa2209;
        }
      }
      .tipsbtn {
        width: 121px;
        background: linear-gradient(90deg, #f9211c, #ff6335);
        color: #fff;
        text-align: center;
        line-height: 46px;
        display: block;
      }
    }
  }
  </style>
  